<script setup>
import { ref, computed, inject } from 'vue'
import { Vue3Lottie } from 'vue3-lottie'
import { useCommonStore, useUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { addOrDelFeedbackAPI } from '@/api/leaveword.js'
import { message } from '@/components/ZyMessage/index.js'
import { VueEllipsis3 } from 'vue-ellipsis-3'
import { formatDateTime } from '@/utils/common.js'
import loading_circle from '@/assets/json/loading_circle.json'
const commonStore = useCommonStore()
const userStore = useUserStore()
const { currentWall } = storeToRefs(commonStore)

const props = defineProps({ card: Object, isEllipsis: { type: Boolean, default: true } })

// 标签
const label = computed(() => {
  return currentWall.value.labels.find((item) => item.id === props.card.label_id)?.name
})
// 背景颜色
const bgColor = computed(() => {
  return currentWall.value.colors.find((item) => item.id === props.card.color_id)?.bg_color
})

// 喜欢或取消喜欢
const loading = ref(false)
const refreshLike = inject('refreshLike') // 刷新喜欢状态
const onClikeLike = async () => {
  if (!userStore.user.id) return message('请先登录!', 'warning')
  loading.value = true
  try {
    await addOrDelFeedbackAPI({ leaveword_id: props.card.id, type: 1 })
    // 刷新喜欢状态
    refreshLike(props.card.id)
  } finally {
    loading.value = false
  }
}
const onClickLottie = () => {}
</script>

<template>
  <div class="zy-card" :style="{ backgroundColor: bgColor }">
    <!-- 顶部 -->
    <div class="top">
      <p class="time">{{ formatDateTime(card.created_time) }}</p>
      <p class="label">{{ label }}</p>
    </div>
    <!-- 内容 -->
    <vue-ellipsis-3 class="content" v-if="isEllipsis" :text="card.content" :visibleLine="7" />
    <div class="content" v-else>{{ card.content }}</div>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bottom-left">
        <Vue3Lottie
          class="bottom-icon"
          v-if="loading"
          :animationData="loading_circle"
          :height="16"
          :width="16"
          @click.stop="onClickLottie"
        />
        <svg-icon
          class="bottom-icon like"
          v-else
          icon-name="aixin"
          :class="{ 'like-active': card.is_like }"
          @click.stop="onClikeLike"
        ></svg-icon>
        <!-- 喜欢个数 -->
        <span>{{ card.like_count }}</span>
        <!-- 评论个数 -->
        <svg-icon icon-name="liuyan" class="bottom-icon"></svg-icon>
        <span>{{ card.comment_count }}</span>
      </div>
      <vue-ellipsis-3 class="name" :text="card.name" :visibleLine="1" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.zy-card {
  min-height: 240px;
  padding: 10px 20px 16px;
  transition: var(--tr);
  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      font-size: 12px;
      color: var(--gray-text-2);
    }
  }
  .content {
    font-family: serif;
    min-height: 145px;
    font-size: 14px;
    color: var(--primary-text);
    margin: 15px 0;
    word-break: break-all;
    cursor: pointer;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .bottom-left {
      display: flex;
      align-items: center;
      font-size: 16px;
      .bottom-icon {
        margin-right: 4px;
        color: var(--gray-text-2);
      }
      .like {
        cursor: pointer;
        transition: var(--tr);
        &:hover {
          color: var(--like-color);
        }
        &-active {
          color: var(--like-color);
        }
      }
      span {
        font-size: 12px;
        color: var(--gray-text-2);
        margin-right: 12px;
      }
    }
    .name {
      font-family: serif;
      font-size: 16px;
      color: var(--primary-text);
      font-weight: 700;
    }
  }
}
</style>
